generateColor($color)
  $renderColor = lookup('$' + $color + '-color')
  .bg-{$color}-color
    background-color $renderColor
  .{$color}-color
    color $renderColor

generateColor('primary')
generateColor('primary2')
generateColor('primary3')
generateColor('link')
generateColor('blue')
generateColor('green')
generateColor('yellow')
generateColor('red')

generateColor('dark')
generateColor('dark2')
generateColor('dark3')
generateColor('dark4')
generateColor('dark5')

generateColor('white')
generateColor('gray')
generateColor('gray2')
generateColor('gray3')
generateColor('gray4')
generateColor('gray5')

generateTextAlign($dir)
  .text-{$dir}
    text-align $dir !important

generateTextAlign(left)
generateTextAlign(center)
generateTextAlign(right)

.text-ellipsis
  overflow hidden
  text-overflow ellipsis
  white-space nowrap

.text-hover
  cursor pointer
  &:hover
    color $primary-color

.dark-text-hover
  color $gray-color
  cursor pointer
  &:hover
    color $dark2-color

generateFloat($dir)
  .float-{$dir}
    float $dir

generateFloat(left)
generateFloat(right)

.clearfix
  zoom 1
  &:after
    content ""
    display block
    visibility hidden
    height 0
    clear both

.relative
  position relative

.absolute
  position absolute

.middle
  position absolute
  top 50%
  transform translateY(-50%)

.middle-center
  position absolute
  left 50%
  top 50%
  transform translate(-50%, -50%)

.middle-right
  position absolute
  right 0
  top 50%
  transform translate(0, -50%)

.pointer
  cursor pointer

.bottom-line
  border-bottom 1px solid $gray4-color

.d-split
  display inline-block
  width 5px
  height 2px
